<!-- changeDialog -->
<template>
  <div id="changeDialog">
    <div class="changeDialog">
      <div class="head">
        <div class="windowIcon"></div>
        <p class="title">倾斜投影</p>
        <div class="screenFull" @click="screenFull"></div>
        <div class="closeButton" @click="closeChangeDialog"></div>
      </div>
      <div class="main">
        <iframe
          ref="iframe"
          @load="loaded"
          frameborder="no"
          :src="iframeLink"
          :style="{ height: winHeight }"
        ></iframe>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/utils/bus";
export default {
  name: "changeDialog",
  components: {},
  //这里存放数据
  data() {
    return {
      isShow: false,
      iframeLink: "http://172.16.11.111:82/index/",
      winHeight: "33vw",
    };
  },
  //计算属性，多个值影响一个结果
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    Bus.$on("openDialog", (payload) => {
      this.isShow = true;
    });
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  //生命周期 - 销毁之前（可以访问DOM元素）
  beforeDestroy() {},
  //方法集合
  methods: {
    //最大化
    screenFull() {
      if (this.winHeight == "33vw") {
        this.$emit("screenFull");
        this.winHeight = document.documentElement.clientHeight + "px";
      } else {
        this.winHeight = "33vw";
        this.$emit("resetScreen");
      }
    },
    //关闭弹窗
    closeChangeDialog() {
      this.$emit("closeChangeDialog");
      this.winHeight = "33vw";
    },
    loaded() {},
  },
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
#changeDialog {
  /deep/ .changeDialog {
    background-image: linear-gradient(
      90deg,
      rgba(3, 83, 165, 0.72) 0%,
      rgba(3, 56, 117, 0.93) 61%,
      rgba(3, 53, 110, 0.96) 100%
    );
    box-shadow: 0vw 0.13vw 0.52vw 0vw rgba(0, 0, 0, 0.26);
    border-radius: 0.21vw;
    border: solid 0.05vw #34a1ff;
    .head {
      display: flex;
      align-items: center;
      padding: 0.78vw 1.3vw;
      border-bottom: 0.03vw solid #03d0fd;
      .windowIcon {
        background: url("../../../../../../assets/images/indexBody/amapDialog/windowIcon.png");
        background-size: 100% 100%;
        width: 0.73vw;
        height: 0.6vw;
      }
      .title {
        font-size: 0.63vw;
        color: #03f2fb;
        margin: 0 auto 0 0.44vw;
        user-select: none;
      }
      .screenFull {
        width: 0.52vw;
        height: 0.52vw;
        border: 1px solid #34a1ff;
        cursor: pointer;
        margin-right: 1vw;
      }
      .closeButton {
        background: url("../../../../../../assets/images/indexBody/amapDialog/closeButton.png");
        background-size: 100% 100%;
        width: 0.52vw;
        height: 0.52vw;
        cursor: pointer;
      }
    }
    .main {
      iframe {
        width: 100%;
      }
    }
  }
}
</style>